<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="layui/css/layui.css">
	<script src="layui/layui.js"></script>
</head>

<body>
	<h1>one</h1>

	<button id="addUser">上传头像</button>



	<div id="user" style="display: none">
		<div class="layui-upload">

			<img id="pic" src="images/default.jpg" style="width:160px;height:160px" />

			<button type="button" class="layui-btn" id="test1">
				<i class="layui-icon">&#xe67c;</i>浏览图片
			</button>

			
			<button type="button" class="layui-btn" id="btn_ok">
				<i class="layui-icon">&#xe67c;</i>确定上传
			</button>
		</div>
	</div>

</body>


<script>
// 解决下拉列表框不显示
layui.use('form', function () {
			var form = layui.form;
			form.render();
		});

	layui.use(['jquery', 'table', 'layer', 'form', 'upload'], function () {
		//获取各模块的实例
		var $ = layui.jquery;
		var table = layui.table;
		var layer = layui.layer;
		var form = layui.form;
		var upload = layui.upload;

		//上传接口
		var uploadInst = upload.render({
			elem: '#test1',				//绑定浏览文件元素
			url: 'http://localhost:8080/cinema/api/FilmPictureUploadServlet.do',		//实现上传功能的服务器端程序
			accept: 'file',				//设置允许上传的文件类型
			bindAction: '#btn_ok', 		//绑定提交上传的按钮
			exts: 'jpg|png',				//设置允许上传的文件后缀
			size: 10000,					//设计允许上传文件的大小，单位：KB
			field: "attach",			//绑定上传控件的字段名，便于服务器获取上传文件
			auto: false,					//设置不自动上传
			done: function (res) {			//上传成功的回调
				//res参数：服务器响应回来的数据，可以封装为responseData对象
				console.info(res);
				//$("#pic").prop("src","${pageContext.request.contextPath}/upload/tx/"+res.data) ;


				//上传成功后，隐藏按钮，防止上传多次
				$("#btn_ok").hide();
				//layer.msg('上传成功');
				layer.msg('上传成功', { icon: 1 });
			},
			error: function () {			//上传失败的回调
				// 请求异常回调
				// layer.msg('图片上传失败');
				layer.msg('图片上传失败~~', { icon: 5 });
			},
			choose: function (obj) {		//选择文件后的回调
				obj.preview(function (index, file, result) {
					//console.log(index); 	//得到文件索引
					//console.log(file); 	//得到文件对象
					//console.log(result); 	//得到文件base64编码，比如图片

					//显示图片
					$("#pic").prop("src", result);
				});

				//显示提交按钮
				$("#btn_ok").show();
			}
		});
	});

	layui.use(['jquery', 'table', 'layer', 'form'], function () {
		var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

		//绑定新建按钮
		$('#addUser').on("click", function () {
			//清空表单内容

			layer.open({
				type: 1,
				title: '发布上机作业',
				area: ['50%', '90%'],
				resize: false,
				content: $("#user"), //注意，不需要调用.html()方法
				btn: ['确认', '取消'],
				btn1: function (index) {
					
				}
			});
		});

	});


</script>

</html>